import React, { useEffect } from 'react';
import DocumentTitle from 'react-document-title';
import { useDispatch } from 'react-redux';
import { useHistory, useParams } from 'react-router-dom';
import { selectedAddressAction, updateOrder } from '../../../store/actionCreators';
import { PaysuccessStyle } from '../style';
import { mixRoute } from '@/utils'



const PaySuccess = (props) => {

  const dispatch = useDispatch()
  const history = useHistory()
  const params = useParams()
  const { price, caigouOrderId } = params


  useEffect(() => {

    localStorage.removeItem('fullLoad') // 删除满载标志
    dispatch(updateOrder({
      orderno: null,
      acceptableTime: null,
      loadage: null,
      remark: '',
      isRead: false,
      agree: false
    })) // 清除订单配置缓存
    dispatch(selectedAddressAction({})) // 支付失败清除 选择地址
    localStorage.removeItem('orderNoList')
    localStorage.removeItem('prepayOrder')

    return () => {
    }
  }, [])




  return (
    <PaysuccessStyle>
      <DocumentTitle title={props.route.title} />
      <div className="mian flex-column">
        <div className="top">
          <img src="https://res.lexiangpingou.cn/images/826/2020/09/ij70ZwrB9tbUC0bC2jtCz270ZC9TB2.png" alt="" />
          <p>支付成功</p>
        </div>
        <div className="pay-info">
          <div className="pay-way flex-row">
            <img src="https://res.lexiangpingou.cn/images/826/2020/09/A768nR4sbRYrl7kWHrK7zBW9DwhB5k.png" alt="" />
            <span>支付方式</span>
            <span>微信支付</span>
          </div>
          <div className="pay-price flex-row">
            <img src="https://res.lexiangpingou.cn/images/826/2020/09/Asj3r5tiScbCR3YBhsWJjyVcB7B75J.png" alt="" />
            <span>支付金额</span>
            <span>{price}</span>
          </div>
        </div>
        <div className="option flex-row">
          <button
            style={{ border: ' solid #e5e5e5 1px', borderRadius: '.75rem' }}
            className="see-order buttons"
            onClick={e => { history.push('/purchaseOrderDetail/' + caigouOrderId) }}
          >
            查看订单
              </button>
          <button
            className="gohome buttons"
            style={{ border: ' solid #FF843A 1px', borderRadius: '.75rem', color: '#FF843A' }}
            onClick={e => {
              mixRoute(history, '/')
            }}
          >
            返回首页
              </button>
        </div>
      </div>
    </PaysuccessStyle>
  )
}


export default PaySuccess